<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <!--  详情  -->
    <div style="text-align: center;margin-top: 20px;">
      <h1>{{ detailInfo.title }}</h1>
    </div>
    <div class="data_div" style="display:flex">
      <div class="data_div_left">
        <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="内容" name="first">
            <div v-html="detailInfo.content">
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <PcFooter/>
    <PcUp/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'
import headTop from '../../components/myComponents/components/top/index'
import PcHeader from '../../components/myComponents/components/header/index'
import PcCarousel from '../../components/myComponents/components/carousel/index'
import PcCard from '../../components/myComponents/components/pc_card/index'
import PcFooter from '../../components/myComponents/components/pc_footer/index'
import PcUp from '../../components/myComponents/components/pc_up/index'
import suspensionSearch from '../../components/myComponents/components/suspension_search/index'
import {getGongGao} from "@/api/pc";

export default {
  name: 'PcDetails',
  components: {
    headTop,
    PcHeader,
    PcCarousel,
    PcCard,
    PcFooter,
    PcUp,
    suspensionSearch
  },
  created() {
    this.detailInfoId = this.$route.query.id
    this.getInfo(this.detailInfoId)
  },
  data() {
    return {
      detailInfo: {},
      detailInfoId: null,
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getInfo(id) {
      this.detailInfo = {
        id: 'hanP',
        title: 'JAVA_TITLE',
        content: '2022-JAVA_TITLEJAVA_TITLEJAVA_TITLEJAVA_TITLEJAVA_TITLEJAVA_TITLE-20',
      }
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}

</script>
<style scoped>
.data_type_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 355px;
  width: 1210px;
  padding: 10px;
}

.data_div {
  margin: 20px 355px;
  width: 1210px;
  display: flex;
}

.data_div_left {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 1210px;
  padding: 16px;
  float: left;
}

.data_div_right {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 282px;
  height: 372px;
  float: right;
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.image {
  width: 100%;
  display: block;
}

.fontSpan {
  font-size: 14px;
  color: #999;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  height: 372px;
}

</style>
